import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text} from '@tarojs/components'
import {vcmonitor} from "../../../utils/tools";
import GzhAuth from "../../../components/gzh-auth/gzh-auth";
import {ROOKIEGUID_TASK_LIST, RESOURCE_URL} from "../../../constants/api";
import {http} from "../../../utils/http";
import {user} from "../../../utils/user.service";
import './index.scss'

type PageOwnProps = {};
type PageState = {
  data: any
}

class Index extends Component {
  state: PageState = {
    data: []
  }

  async componentDidShow() {
    vcmonitor(this)
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      Taro.showToast({
        title: '你还未登录，请登录',
        icon: 'none',
      })
      const timer = setTimeout(() => {
        clearTimeout(timer)
        user.jumpLogin()
      }, 1500)
      return
    }
    const res = await http.HPost(ROOKIEGUID_TASK_LIST, {})
    if (res) {
      const data = []
      res.data.taskList.map(item => {
        data.push({
          name: item.intro,
          bean: item.integral,
          isComplete: (item.status == 1)
        })
      })
      this.setState({
        data
      })
    }
  }

  jump(path) {
    Taro.redirectTo({url: path})
  }

  async gotoPage(url) {
    const isLogin = await user.checkLogin()
    if (isLogin) {
      Taro.navigateTo({
        url
      })
    } else {
      user.jumpLogin()
    }
  }

  render() {
    const {data} = this.state;
    const dataColor = Taro.getStorageSync('colorData');
    return (
      <View className='newbie-task'>
        <GzhAuth/>
        <View className='newbie-task-wrap'>
          {process.env.P_ENV === 'kd' ?
            <Image src={`${RESOURCE_URL}/upload/file/bc0a972c8c714e289ca5f93cd7ecb57a.png`} className='newbie-task-image'/>
            : <Image src={`${RESOURCE_URL}/upload/file/71663be744664a7683b2611499e3e1e6.jpg`} className='newbie-task-noimage'/>}
          <View className='newbie-task-wrap-box'>
            {process.env.P_ENV === 'kd' && <View className='newbie-task-wrap-box-text-small m-b-10'>蝌/蚪/亲/子</View>}
            <View className='newbie-task-wrap-box-text' style={`color: ${ process.env.P_ENV === 'kd' ? '#fff' : '#7b300e' }`}>新手任务</View>
          </View>
        </View>
        <View className='newbie-task-block m-t--185 m-b-15'>
          {process.env.P_ENV === 'kd' ?
            <View className='newbie-task-block-title m-b-40'>恭喜您成为我们的<Text className='orange'>{process.env.fxName}</Text>!</View>
            : <View className='newbie-task-block-title m-b-40'>恭喜您成为分销商!</View>}
          <View className='newbie-task-block-content m-b-60'>
            完成以下任务可获取{process.env.integralName}和佣金哦，{process.env.integralName}可在商城做现金抵扣，买商品更优惠。<Text
            style={`color: ${ process.env.P_ENV === 'kd' ? '#76BEA9' : '#fe491a'}`}
            onClick={this.gotoPage.bind(this, '/main/my/guidePage/newbieTask')}>查看教程></Text>
          </View>
          { process.env.P_ENV === 'kd' ? <View className='newbie-task-block-list'>
            {
              data.map(item => {
                return (
                  <View className={`newbie-task-block-list-item m-b-15 ${item.isComplete ? 'complete' : ''}`}>
                    <View className='newbie-task-block-list-item-left'>
                      {item.isComplete ? <View className='newbie-task-block-list-item-left-tipIcon-done'></View> :
                        <View className='newbie-task-block-list-item-left-tipIcon'/>}
                      <View className='newbie-task-block-list-item-left-name m-b-15'>
                        {item.name}
                      </View>
                      <View className='newbie-task-block-list-item-left-content bold'>
                        可获得
                        {item.isComplete ?
                          <Image src={`${RESOURCE_URL}/upload/file/af085c050a7b4ea0a31b331721178fbd.png`}
                                 className='newbie-task-block-list-item-left-content-icon imgicon'/> :
                          <Image src={`${RESOURCE_URL}/upload/file/e12b00220fb94ca780bd3862dceb2447.png`}
                                 className='newbie-task-block-list-item-left-content-icon imgicon'/>}
                        <Text
                          className={`gray m-r-10 newbie-task-block-list-item-left-content-textLeft ${item.isComplete ? '' : 'orange'}`}>x{item.bean}</Text>
                        <Text
                          className={`newbie-task-block-list-item-left-content-bean gray m-r-10 ${item.isComplete ? '' : 'orange'}`}>{process.env.integralName}</Text>
                        <Text className={`gray m-r-10 ${item.isComplete ? '' : 'orange'}`}>每单可赚相应佣金</Text>
                      </View>
                    </View>
                    <View className='newbie-task-block-list-item-right'>
                      <View
                        className={`newbie-task-block-list-item-right-btn ${item.isComplete ? 'gray-btn' : ''}`}
                        style={`${!item.isComplete && `background: ${dataColor.gradientColor};`}`}
                        onClick={this.jump.bind(this, '/pages/limited/index')}
                      >{item.isComplete && '已完成' || '做任务'}</View>
                    </View>
                  </View>
                )
              })
            }
          </View>
            : <View className='newbie-task-noblock-list'>
            {
              data.map(item => {
                return (
                  <View className={`newbie-task-noblock-list-item m-b-15`}>
                    <View className='newbie-task-noblock-list-item-left'>
                      <View className='newbie-task-noblock-list-item-left-tipIcon'></View>
                      <View className='newbie-task-noblock-list-item-left-name m-b-15'>
                        {item.name}
                      </View>
                      <View className='newbie-task-noblock-list-item-left-content bold'>
                        可获得
                        <Image src={`${RESOURCE_URL}/upload/file/e12b00220fb94ca780bd3862dceb2447.png`}
                               className='newbie-task-noblock-list-item-left-content-icon imgicon'/>
                        <Text
                          className={`gray m-r-10 newbie-task-noblock-list-item-left-content-textLeft orange`}>x{item.bean}</Text>
                        <Text
                          className={`newbie-task-noblock-list-item-left-content-bean gray m-r-10 orange`}>{process.env.integralName}</Text>
                        {!item.isComplete && <Text className='newbie-task-noblock-list-item-left-content-info bold'>每单可赚相应佣金</Text>}
                      </View>
                    </View>
                    <View className='newbie-task-noblock-list-item-right'>
                      <View
                        className={`newbie-task-noblock-list-item-right-btn ${item.isComplete ? 'gray-btn' : ''}`}
                        style={`background: ${item.isComplete ? '#ffde28' : '#ff6036'};color: ${item.isComplete ? '#000' : '#fff'}` }
                        onClick={this.jump.bind(this, '/pages/limited/index')}
                      >{item.isComplete && '已完成' || '做任务'}</View>
                    </View>
                  </View>
                )
              })
            }
            </View>}
        </View>
        <View className='newbie-task-block'>
          <View className='newbie-task-block-title max'>
            如何查看你的福利？
          </View>
          <View className='newbie-task-block-content gray-888 m-b-40'>
            完成任务获取的{process.env.integralName}/ 佣金收益您可在【我的】页面里查看
          </View>
          <View className='newbie-task-block-image'>
           {process.env.P_ENV === 'kd' ?
             <Image src={`${RESOURCE_URL}/upload/file/df267cdb41714adbb7663d50b2cacc71.png`} className='img'/> :
             <Image src={`${RESOURCE_URL}/upload/file/192be5cb1208470cb2e981e33878dbc2.jpg`} className='img'/>}
          </View>
        </View>
      </View>
    );
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>
